import toastVue from './toast.vue';
//@ts-check
class Toast {
    /**
     * @param {Object} options - selector 元素选择器  type 类型
     */
    constructor(options) {
        options||(options={})
        this.selector = options.selector || 'body';
        this.type = options.type||'success';
    }
    /**
     * 显示操作通知
     * @param {string} message - 消息内容
     * @param {(String|Object)} [type=success] - 类型或配置对象 默认成功success，其他类型 info，warn, error or options{type,mountEl}
     */
    show(message, type) {
        //参数检查
        if (typeof type === 'string') {
            type = {
                type
            }
        }
        this.render(message, type||{})
    }

    /**
     * 渲染到挂载点
     * @param {string} message - 消息内容
     * @param {object} options - 配置项
     */
    render(message, options) {
        var _this=this;
        //处理dom
        let div = document.createElement('div'),
            el = document.createElement('div');
        var monutEL;
        if (typeof options.monutEL !== 'object') {
            var els= document.querySelectorAll(options.selector || _this.selector)
            monutEL=els.item(els.length-1);
        };
        var  rect=monutEL.getBoundingClientRect();
        let mTop = rect.top,
            mHeight = rect.height,
            mWidth  = rect.width,
            mLeft = rect.left;
        console.log(rect)
        document.body.appendChild(div);
        div.appendChild(el);

        //新建实例
        let vueClass = Vue.extend(toastVue);
        let vm = new vueClass({
            el: el,
            propsData: {
                message,
                type:options.type||_this.type
            },
            mounted:function(){
                this.$el.style.top = (mTop + mHeight)+'px';
                this.$el.style.width = mWidth + 'px';
                this.$el.style.left = mLeft + 'px';
            }
        });
        vm.$on('destroy',function(){
            div.remove();
            console.log('成功删除')
        })
    }
}

export default Toast;